<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'

import PageHeader from "@/components/PageHeader.vue";
import {confirmGiftOrderApi, createGiftOrderApi, giftPayApi} from "@/api/index.js";
import {message} from "ant-design-vue";
const router = useRouter()
const route = useRoute()
const address = ref({
  id: '',
  name: '',
  phone: '',
  addr: '',
  modify_region: {
    name: ''
  }
}) // 地址信息
const note = ref('') // 备注
const payment = ref() // 实付款
const goodsList = ref([]) // 商品列表
const getOrderInfo = () => {
  const { goods_id } = route.query
  console.log(goods_id)
  createGiftOrderApi({sku_details: [{goods_item_id: goods_id, num: 1, note: ''}], goods_type: 4}).then(res => {
    goodsList.value = res?.items
    address.value = res?.defaultAddress
    payment.value = res?.pay_amount
  }).catch(err => {
    router.back()
    message.error(err.msg)
  })
}
// 提交订单
const submit = () => {
  const { goods_id } = route.query
  const params = {
    pay_type: 1,
    address_id: address.value.id,
    note: note.value,
    goods_type: 4,
    sku_details: [{goods_item_id: goods_id, num: 1, note: ''}],
  }
  confirmGiftOrderApi(params).then(res => {
    const payInfo = {
      goods_type: 4,
      pay_type: 'integral',
      target: res.trade_sn,
      target_type: 'orderall',
      pay: [ { pay_type: 'integral', money: res.total_amount } ]
    }
    giftPayApi(payInfo).then(ps => {
      console.log(ps)
      router.replace({name: 'success', query: {price: res?.total_amount, order_sn: res?.trade_sn, type: 'pay'}})
    })
  }).catch(err => {
    message.error(err.msg)
  })
}
onMounted(() => {
  getOrderInfo()
})
</script>

<template>
  <div class="confirm-order">
    <PageHeader>
      <a-button type="primary" size="small" style="background: var(--primary)" @click="submit"> 提交订单 </a-button>
    </PageHeader>
    <div class="address-box">
      <div class="address-item">
        <div class="address-info">
          <div class="name-mobile"> {{ address?.name }} {{ address.phone }} </div>
          <div class="address"> {{ address.modify_region.name }} {{ address.addr }} </div>
        </div>
        <div class="address-footer">
          <div class="actions">
            <div class="btn"> 切换地址 </div>
          </div>
        </div>
      </div>
    </div>
    <div class="cart-list">
      <div class="cart-shop" v-for="(item, index) in goodsList" :key="item.id">
        <div class="good-list">
          <div class="goods-item" v-for="(goods, gIndex) in item?.goods" :key="goods.sku">
            <div class="box">
              <img :src="goods?.thumb_url" alt="" class="goods-img"/>
              <div class="goods-info">
                <div class="goods-name"> {{ goods.goods_name }} </div>
                <div class="goods-spec ellipsis"> 规格： {{ goods?.spece_value_title?goods?.spece_value_title:'默认规格' }} </div>
                <div class="actions">
                </div>
              </div>
            </div>
            <div class="box mt">
              <div class="goods-price">
                <div class="new-price">  {{ goods.gift_price }} </div>
              </div>
              <div class="num"> x{{ goods?.num }} </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="order-info">
      <div class="item">
        <div class="label"> 支付积分 </div>
        <div class="value"> {{ payment }} </div>
      </div>
    </div>
    <div class="notice">
      <div class="title"> 备注 </div>
      <textarea class="textarea" v-model="note" placeholder="请输入备注信息~"/>
    </div>
  </div>
</template>

<style scoped lang="scss">
.confirm-order {
  padding: 40px 10px;
  .pointer {
    cursor: pointer;
  }
  .address-box {
    .address-item {
      gap: 20px;
      width: 100%;
      display: flex;
      flex-direction: column;
      padding: 10px;
      margin-bottom: 10px;
      border-radius: 10px;
      box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
      .address-info {
        gap: 10px;
        display: flex;
        flex-direction: column;
        .address {
          color: #999;
        }
      }
      .address-footer {
        display: flex;
        justify-content: end;
        padding-top: 10px;
        border-top: 1px solid #eee;
        .btn {
          font-size: 12px;
          padding: 4px 20px;
          border: 1px solid #eee;
          border-radius: 20px;
          cursor: pointer;
          transition: 0.6s all;
          &:hover {
            color: var(--primary);
            border-color: var(--primary);
          }
        }
      }
    }
  }
  .cart-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 10px;
    border-radius: 10px;
    box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
    .cart-shop {
      .shop-title {
        gap: 10px;
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        .shop-img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          object-fit: cover;
        }
        .shop-name {
          font-size: 18px;
          font-weight: bold;
        }
      }
      .good-list {
        gap: 10px;
        display: flex;
        flex-direction: column;
        .goods-item {
          gap: 20px;
          display: flex;
          align-items: start;
          padding-left: 10px;
          position: relative;
          .box {
            display: flex;
            align-items: start;
            gap: 20px;
          }
          .goods-img {
            width: 100px;
            height: 130px;
            border-radius: 10px;
          }
          .goods-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 5px;
            .ellipsis {
              max-width: 470px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .goods-name {
              max-width: 470px;
              font-size: 16px;
              font-weight: bold;
            }
            .goods-spec, .shop-name {
              color: #999;
            }
            .actions {
              margin-top: 10px;
              .anticon {
                color: #999;
                font-size: 20px;
                cursor: pointer;
                margin-right: 10px;
                &:hover {
                  color: var(--primary);
                }
              }
            }
          }
          :deep(.ant-input-number) {
            width: 40px;
          }
          :deep(.ant-input-number-group-addon) {
            background-color: transparent;
            border: none;
            padding: 0;
          }
          :deep(.ant-input-number-input) {
            text-align: center !important;
          }
          .ant-btn {
            width: 32px;
            height: 32px;
            padding: 0;
            color: #999;
            border: none;
            border-radius: 10px;
            background-color: #f1f1f5;
            display: flex;
            align-items: center;
            justify-content: center;
            &:hover {
              background-color: #e8e8f0;
            }
            .anticon {
              color: #242424;
              font-size: 16px;
            }
          }
          .goods-price {
            color: #999;
            font-size: 14px;
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 10px;
            .new-price, .old-price {
              white-space: nowrap;
            }
            .new-price {
              color: #f44;
              font-size: 18px;
            }
            .old-price {
              text-decoration: line-through;
            }
          }
        }

        @media (max-width: 750px) {
          .goods-item {
            display: block;
          }
          .mt {
            margin-top: 20px;
            justify-content: space-between;
          }
          .goods-name, .ellipsis {
            max-width: 100%;
          }
        }
      }
    }
  }
  .order-info {
    padding: 10px 20px;
    margin-top: 10px;
    border-radius: 10px;
    box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      line-height: 44px;
    }
  }
  .notice {
    padding: 10px;
    margin-top: 10px;
    border-radius: 10px;
    box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
    .title {
      font-size: 16px;
      margin-bottom: 10px;
    }
    .textarea {
      padding: 10px;
      border-radius: 10px;
      background-color: #f8f8f8;
      border: none;
      width: 100%;
      height: 150px;
      font-size: 14px;
      resize: none;
    }
  }
}
</style>